<script setup lang="ts">
import {ArrowRight, Expand, Fold, FullScreen, Refresh} from "@element-plus/icons-vue";
import useAdmin from "@/store/modules/admin.ts";
import {getImage} from "@/utils";
import {useRoute} from "vue-router";
import useSettingStore from "@/store/modules/setting.ts";
const adminStore = useAdmin();
const $route = useRoute();
// 引入setting模块
const settingStore = useSettingStore();
const fullscreen = function(){
    // document.fullscreenElement:null说明未全屏，否则为全屏
    if(document.fullscreenElement){
        // 全屏----》退出全屏
        document.exitFullscreen();
    }else{
        // 未全屏---》实现全屏
        document.documentElement.requestFullscreen();
    }
}
defineProps(["isCollapse"]);
const $emits = defineEmits(["update:is-collapse"]);
defineOptions({
    name:"Header"
})
</script>

<template>
<el-card>
    <el-space>
        <el-icon style="cursor: pointer"  @click="$emits('update:is-collapse',!isCollapse)" :size="25">
            <component :is="isCollapse?Expand:Fold"></component>
        </el-icon>
        <el-breadcrumb :separator-icon="ArrowRight">
            <el-breadcrumb-item v-show="item.meta.title" v-for="item in $route.matched" :key="item.path" :to="{ path: item.path }">
                <el-space>
                    <el-icon>
                        <component :is="item.meta.icon"/>
                    </el-icon>
                    <el-text>{{item.meta.title}}</el-text>
                </el-space>

            </el-breadcrumb-item>
        </el-breadcrumb>
    </el-space>

    <el-space>
        <el-button @click="settingStore.isRefresh=!settingStore.isRefresh" :icon="Refresh" circle />
        <el-button @click="fullscreen" :icon="FullScreen" circle />
        <el-text>欢迎回来：{{adminStore.info?.adminName}}</el-text>
        <el-dropdown>
            <el-avatar shape="square" :size="30" fit="fill" :src="getImage(adminStore.info?.avatar as string)" />
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item>个人信息</el-dropdown-item>
                    <el-dropdown-item>密码修改</el-dropdown-item>
                    <el-dropdown-item @click="adminStore.getSysOutLoginAsync()" divided>退出登陆</el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>
    </el-space>

</el-card>
</template>

<style scoped>
    :deep(.el-card__body){
        height:50px;
        padding:0 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
</style>